<template>
  <div>
    <div class="explains">
      <h4>操作说明</h4>
      <p>* 该模块主要用于查看消息。</p>
    </div>
    <ul class="uls">
      <li class="uls_yd" @click="read">已读</li>
      <li class="uls_wd" @click="unread">未读</li>
    </ul>

    <el-table :data="tableData" style="width: 95%">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
    };
  },
  methods: {
    read() {},
    unread() {},
  },
};
</script>

<style scoped>
.explains {
  border-radius: 15px;
  line-height: 30px;
  background-color: rgb(197, 230, 235);
  margin-top: 15px;
  margin-left: 5%;
}
.uls {
  list-style: none;
  margin-top: 10px;
}
.uls_yd {
  width: 200px;
  height: 49px;
  float: left;
  font-size: 23px;
  text-align: center;
}
.uls_wd {
  width: 200px;
  height: 49px;
  float: left;
  font-size: 23px;
  text-align: center;
  /* border-bottom: 1px solid blue; */
}
li:hover {
  border-bottom: 1px solid blue;
}
</style>
